<template>
	<uni-nav-bar title="车上生活" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<view class="package search">
		<input class="uni-input" confirm-type="search" placeholder="搜索商品" @confirm="confirm" v-model="search"
			@input="interrogate" />
	</view>
	<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
		:style="{ height: pageHeight + 'px' }">
		<view class="package space-between" style="margin: 0px auto;padding:15rpx 20rpx;"
			v-for="(child,childindex) in frinedList" :key="childindex" :style="{marginTop:childindex===0?'0px':''}"
			@click="navTo('gemstone/shopDetail?id='+child.id)">
			<image :src="child.image" mode=""></image>
			<view style="width:67%;">
				<view class="title">{{child.name}}</view>
				<view class="inventory">库存：{{child.stock}}</view>
				<view class="space-between">
					<view style="font-size: 26rpx;color:#5097FB;">
						蓝宝石：<text style="font-size: 36rpx;">{{child.score}}</text>
					</view>
					<view class="center num">
						<text style="border: 1px solid #1B91FF;" v-if="child.cart_gem_nums!=0"
							@click.stop="carDeatil(child.id,1,'gem')">-</text>
						<text v-if="child.cart_gem_nums!=0">{{child.cart_gem_nums}}</text>
						<text style="background: linear-gradient(-66deg, #4E96FB, #65A6FB);"
							@click.stop="carDeatil(child.id,2,'gem')">+</text>
					</view>
				</view>
				<view class="space-between" style="margin-top:10rpx;">
					<view style="font-size: 26rpx;color: #FE412C;">
						钱包价格：<text style="font-size: 24rpx;">￥</text><text
							style="font-size: 36rpx;">{{child.price}}</text>
					</view>
					<view class="center num">
						<text v-if="child.cart_money_nums!=0" @click.stop="carDeatil(child.id,1,'money')">-</text>
						<text v-if="child.cart_money_nums!=0">{{child.cart_money_nums}}</text>
						<text @click.stop="carDeatil(child.id,2,'money')">+</text>
					</view>
				</view>
			</view>
		</view>
		<Popu v-if="frinedList.length<1" :pageHeight="pageHeight" text="暂无商品信息"></Popu>
	</scroll-view>
	<CarBottom @init="retrieve()" @carDeatil="carDeatil" ref="bottom"></CarBottom>
</template>

<script setup lang="ts">
	import { navBack, navTo } from '@/utils/navigator';
	import CarBottom from '@c/reservation/carBottom';
	import Popu from '@c/earthPushing/common/popu.vue';
	import { ref } from 'vue';
	import { showLoading, errorToast } from '@/utils/prompt';
	import { toPublish } from '@mqtt';
	import { getGoodsListByScore } from '@/gql/gemstone';
	import { getDriverID } from '@/stores/driverID';
	const driver_id = getDriverID();
	const bottom = ref(null)
	const search = ref('')
	const inquireAbout = ref(false)
	const pageHeight = ref();
	const frinedList = ref([])
	const lastPage = ref(1);
	const currentPage = ref(1);
	uni.getSystemInfo({
		success: function (res) {
			pageHeight.value = res.windowHeight - 170;
		},
	});
	/**
	 * 获取搜索商品列表
	 */
	function init() {
		showLoading()
		const payload = {
			query: getGoodsListByScore,
			variables: {
				page: currentPage.value,
				keywords: search.value,
				driver_id
			},
		};
		toPublish(
			'ql/score/getGoodsListByScore',
			payload,
			(obj : any) => {
				uni.hideLoading();
				const { getGoodsListByScore } = obj.data;
				frinedList.value = [...frinedList.value, ...getGoodsListByScore.list];
				lastPage.value = getGoodsListByScore.lastpage;
			}
		);
	}
	/**
	 * 加载更多
	 */
	function loadMore() {
		if (currentPage.value < lastPage.value) {
			currentPage.value++;
			init();
		}
	}
	function retrieve() {
		currentPage.value = 1;
		frinedList.value = [];
		init();
	}
	// 购物车调整
	function carDeatil(id : number, num : number, type : string) {
		showLoading()
		const payload = {
			driver_id,
			goods_id: id,
			type: type
		};
		const topic = num === 1 ? 'score/jianCart' : 'score/addCart'
		toPublish(topic,
			payload,
			(obj : any) => {
				uni.hideLoading();
				const { code, msg } = obj;
				if (code === 1) {
					shopList(type, num, id)
					bottom.value.carLisst()
				} else {
					errorToast(msg)
				}
			}
		);
	}
	function shopList(type : string, num : number, id : number) {
		switch (type) {
			case 'gem':
				frinedList.value.map((item) => {
					if (item.id == id && num == 1) {
						item.cart_gem_nums--
					} else if (item.id == id && num == 2) {
						item.cart_gem_nums++
					}
				})
				break;
			case 'money':
				frinedList.value.map((item) => {
					if (item.id == id && num == 1) {
						item.cart_money_nums--
					} else if (item.id == id && num == 2) {
						item.cart_money_nums++
					}
				})
				break;
		}
	}
	/**
	 * 搜索内容
	 * @property {Object} evt 监听搜索框输入信息
	 */
	function interrogate(evt : any) {
		const { detail } = evt;
		if (!detail.value && inquireAbout) {
			// console.log(detail.value)
			currentPage.value = 1;
			frinedList.value = [];
			// init();
		}
	}
	/**
	 * 搜索
	 */
	function confirm() {
		if (search.value) {
			inquireAbout.value = search.value ? true : false;
			currentPage.value = 1;
			frinedList.value = [];
			init();
		} else {
			errorToast('请输入您要搜索的内容')
		}
	}
</script>

<style lang="less">
	.search {
		border-radius: 30px;
		text-align: center;
		color: #666;
	}

	image {
		width: 210rpx;
		height: 210rpx;
		border-radius: 5px;
	}

	.title {
		width: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.inventory {
		font-size: 26rpx;
		color: #666;
		margin: 10rpx 0px;
	}

	.num {
		text:nth-child(odd) {
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;
			text-align: center;
			line-height: 48rpx;
			box-sizing: border-box;
		}

		text:nth-last-child(3) {
			border: 1px solid #FF5700;
		}

		text:nth-of-type(2) {
			width: 50rpx;
			text-align: center;
		}

		text:nth-last-child(1) {
			background: linear-gradient(-66deg, #FF5700, #FE0000);
			color: #fff;
		}
	}
</style>